<template>
  <view class="forget">
    <view class="content">
      <!-- 主体 -->
      <view class="main">
        <wInput v-model="formData.phone" type="text" maxlength="11" placeholder="请输入手机号码"></wInput>
        <wInput
          v-model="formData.phoneCode"
          type="number"
          maxlength="6"
          placeholder="验证码"
          isShowCode
          codeText="获取验证码"
          :setTime="countDownTime"
          ref="runCode"
          @setCode="getVerCode()"
        ></wInput>
        <wInput v-model="formData.newPassword" type="password" maxlength="11" placeholder="请输入新密码" isShowPass></wInput>
      </view>

      <wButton text="重置密码" :rotate="isRotate" @click.native="startRePass()"></wButton>
    </view>
  </view>
</template>

<script>
import wInput from "../../components/watch-login/watch-input.vue"; //input
import wButton from "../../components/watch-login/watch-button.vue"; //button
import Form from "../../components/public/Form/index.vue";
import { mapActions, mapMutations } from "vuex";
export default {
  components: {
    wInput,
    wButton,
    Form
  },
  data() {
    return {
      isRotate: false, //是否加载旋转
      countDownTime: 60,
      formData: {
        phone: "",
        phoneCode: "",
        newPassword: ""
      },
      type: "forget"
    };
  },
  onLoad(query) {
    let { reset } = query;
    if (reset == "reset") {
      this.type = "reset";
    }
  },
  methods: {
    ...mapActions({
      forgetPwd: "forgetPwd",
      getPhoneCode: "getPhoneCode",
      resetPwd: "resetPwd"
    }),
    ...mapMutations({ ONLY_LAYOUT: "ONLY_LAYOUT" }),
    getVerCode() {
      //获取验证码
      if (this.formData.phone.length != 11) {
        uni.showToast({
          icon: "none",
          position: "bottom",
          title: "手机号不正确"
        });
        return false;
      }

      this.$refs.runCode.$emit("runCode"); //触发倒计时（一般用于请求成功验证码后调用）
      let params = {
        phone: this.formData.phone,
        type: "resetpwd"
      };
      this.getPhoneCode(params).then(res => {
        if (!res.code) {
          uni.showToast({
            icon: "none",
            title: "验证码发送成功"
          });
        }
        setTimeout(() => {
          this.$refs.runCode.$emit("runCode", 0); //假装模拟下需要 终止倒计时
        }, this.countDownTime * 1000);
      });
    },
    startRePass() {
      //重置密码
      if (this.isRotate) {
        //判断是否加载中，避免重复点击请求
        return false;
      }
      if (this.formData.phone.length != 11) {
        uni.showToast({
          icon: "none",
          position: "bottom",
          title: "手机号不正确"
        });
        return false;
      }
      if (this.formData.newPassword.length < 6) {
        uni.showToast({
          icon: "none",
          position: "bottom",
          title: "密码长度不能少于6位"
        });
        return false;
      }
      if (this.formData.phoneCode.length != 6) {
        uni.showToast({
          icon: "none",
          position: "bottom",
          title: "验证码不正确"
        });
        return false;
      }
      if (this.type == "forget") {
        this.forgetPwd(this.formData).then(res => {
          if (!res.code) {
            this.ONLY_LAYOUT();
            uni.showToast({
              icon: "none",
              title: "重置成功，请重新登录",
              duration: 1000
            });
            this.$goto("login", {}, "reLaunch");
            this.isRotate = false;
          }
        });
      }
      if (this.type == "reset") {
        this.resetPwd(this.formData).then(res => {
          if (!res.code) {
            uni.showToast({
              icon: "none",
              title: "重置成功",
              duration: 1000
            });
            this.isRotate = false;
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import url("../../components/watch-login/css/icon.css");
@import url("./css/main.css");
.content {
  .main {
    margin-top: 30rpx;
  }
}
</style>

